<template>
<div>
  <el-table
      :data="tableData"
      stripe
      border
      style="width: 98%"
      @cell-mouse-enter="enterSelectionRows"
      @cell-mouse-leave="leaveSelectionRows"
      ref="tableDataRef"
  >
    <el-table-column
        type="selection"
        width="55"
        align="center"
    ></el-table-column>
    <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
    ></el-table-column>

    <el-table-column
        v-for="(item,i) in tableProp"
        :key="i"
        v-if="colData[i].istrue"
        :prop="item.syllable"
        :label="item.name"
        :sortable="item.sort"
        :width="item.width"
        :show-overflow-tooltip="item.shows" />
  </el-table>

<!--  <el-popover placement="right" width="400" trigger="click">-->
<!--    <el-checkbox-group v-model="colOptions">-->
<!--      <el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox>-->
<!--    </el-checkbox-group>-->
<!--    <el-button slot="reference">自定义列表</el-button>-->
<!--  </el-popover>-->

  <el-select v-model="colOptions" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
    <el-option v-for="item in colSelect" :key="item" :label="item" :value="item" />
  </el-select>

</div>
</template>

<script>
export default {
  data(){
  return{
    tableProp:[
      {
        syllable:"name",
        name:"名称",
        sort: false,
        width: "140",
        shows: false
      },
      {
        syllable:"select",
        name:"性别",
        sort: false,
        width: "",
        shows: true
      },
      {
        syllable:"kafang",
        name:"年龄",
        sort: false,
        width: "",
        shows: true
      },
      {
        syllable:"fengbi",
        name:"时间",
        sort: false,
        width: "",
        shows: true
      },
      {
        syllable:"isETF",
        name:"事件",
        sort: false,
        width: "",
        shows: true
      },
      {
        syllable:"range",
        name:"地点",
        sort: false,
        width: "",
        shows: true
      },
    ],


    colData: [
      {title: "名称",istrue: true},
      {title: "性别",istrue: true},
      {title: "年龄",istrue: true},
      {title: "时间",istrue: true},
      {title: "事件",istrue: true},
      {title: "地点",istrue: true}],
    colOptions: [], //默认全选
    colSelect: [],

    tableData:[
      {
        name:"1",
        select:"1",
        kafang:"1",
        fengbi:"1",
        isETF:"1",
        range:"1",
      },
      {
        name:"11",
        select:"11",
        kafang:"11",
        fengbi:"11",
        isETF:"11",
        range:"11",
      }
    ]
  }
},
  created() {
    for (let i = 0; i < this.colData.length; i++) {
      this.colSelect.push(this.colData[i].title);
      if (this.colData[i].title == '名称' ||
          this.colData[i].title == '性别'
          ) { //初始化不想展示的列可以放在这个条件里
        continue;
      }
      this.colOptions.push(this.colData[i].title);

    }
  },
  watch: {
    colOptions(valArr) {
      var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
      this.colData.filter(i => {
        console.log(arr.indexOf(i.title) != -1,"arr.indexOf(i.title) != -1")
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
        } else {
          i.istrue = true;
        }
      });
      this.$nextTick(() => {
        this.$refs.tableDataRef.doLayout();
      });
    }
  },
  methods: {
    // 鼠标进入表格行的回调函数
    enterSelectionRows(row, column, cell, event) {
      this.createTips(event, row, '1111111111111111')
      const regex = /^(\d+)?(\.\d{1,2})?$/;
    },
    // 鼠标离开表格行的回调函数
    leaveSelectionRows(row) {
      this.removeTips(row)
    },

    // 创建toolTip
    createTips(el, row, value) {
      const {id} = row
      const tooltipDom = document.createElement('div')
      tooltipDom.style.cssText = `
        display: inline-block;
        max-width: 400px;
        max-height: 400px;
        position: absolute;
        top: ${el.clientY + 5}px;
        left: ${el.clientX}px;
        padding:5px 10px;
        overflow: auto;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #595959;
        background: #fff;
        border-radius: 5px;
        z-index: 19999;
        box-shadow: 0 4px 12px 1px #ccc;
      `
      tooltipDom.innerHTML = value
      tooltipDom.setAttribute('id', `tooltip-${id}`)
      // 将浮层插入到body中
      document.body.appendChild(tooltipDom)
    },
    // 删除tooltip
    removeTips(row) {
      const {id} = row
      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${id}`)
      if (tooltipDomLeave.length) {
        tooltipDomLeave.forEach(dom => {
          document.body.removeChild(dom)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
